<template>
	<div>
		<div class="cover"></div>
		<div id="calendar">
			<!-- 年份 月份 -->
			<div class="month">
				<ul>
					<!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
					<li class="arrow" @click="pickPre(currentYear,currentMonth)"><<{{ currentMonth - Number(1) }}月</li>
					<li class="year-month" @click="pickYear(currentYear,currentMonth)">
						<span class="choose-year">{{ currentYear }}-{{ currentMonth }}</span>
						<!-- <span class="choose-month"></span> -->
					</li>
					<li class="arrow" @click="pickNext(currentYear,currentMonth)">{{ currentMonth + Number(1) }}月>></li>
				</ul>
			</div>
			<!-- 星期 -->
			<ul class="weekdays">
				<li>日</li>
				<li>一</li>
				<li>二</li>
				<li>三</li>
				<li>四</li>
				<li>五</li>
				<li>六</li>

			</ul>
			<!-- 日期 -->
			<ul class="days">
				<!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
				<li v-for="dayobject,key in days" @click="choose(dayobject,key)">
					<!--本月-->
					<!--如果不是本月  改变类名加灰色-->
					<span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">{{ dayobject.day.getDate() }}</span>
					<!--如果是本月  还需要判断是不是这一天-->
					<span v-else>
						<!--今天  同年同月同日 :class="{active:Selection}"-->
						<span v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()" :class="dayobject.istrue ? 'hot_active' : 'active'">{{ dayobject.day.getDate() }}</span> <!-- 当天日期--> 
						<span v-else-if="dayobject.day.getTime()<new Date().getTime()" class="other-month">{{ dayobject.day.getDate() }}</span><!-- 小于当天日期变灰不能点dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() < new Date().getDate()-->
						<span v-else :class="{hot_active:dayobject.istrue}">{{ dayobject.day.getDate() }}</span>
					</span>
				</li>
				<div class="choosebtn" @click="truebtn"><p>确定</p></div>
			</ul>
			
		</div>

	</div>
</template>

<script>
	import getWeek from '../public/function.js'
	import {
		Confirm
	} from 'vux'
	export default {
		name: 'chooseData',
		components: {
			Confirm
		},
		props: {
			date: String,
		},
		data() {
			return {
				currentDay: 1,
				currentMonth: 1,
				currentYear: 1970,
				currentWeek: 1,
				days: [],
				clickData: '',
				dateTime:''
			}
		},
		created: function() { //在vue初始化时调用
			this.initData(null);
			// console.log(this.date);
		},
		methods: {
			initData: function(cur) {
				var leftcount = 0; //存放剩余数量
				var date;


				if (cur) {
					date = new Date(cur);
				} else {
					var now = new Date();
					var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
					d.setDate(35);
					date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
				}
				this.currentDay = date.getDate();
				this.currentYear = date.getFullYear();
				this.currentMonth = date.getMonth() + 1;
				this.currentWeek = date.getDay(); // 1...6,0
				if (this.currentWeek == 0) {
					this.currentWeek = 7;
				}
				var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
				this.days.length = 0;
				// 今天是周日，放在第一行第7个位置，前面6个
				//初始化本周
				//console.log(this.currentWeek)// 控制第一天的位置()
				for (var i = this.currentWeek; i >= 0; i--) {
					var d = new Date(str);
					d.setDate(d.getDate() - i);
					var dayobject = {}; //用一个对象包装Date对象  以便为以后预定功能添加属性
					dayobject.day = d;
					this.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
				}
				// 				for(var i=0;i<this.days.length;i++){
				// 					console.log(this.days[i].day.getMonth())
				// 				}
				//其他周
				for (var i = 1; i <= 35 - this.currentWeek; i++) {
					var d = new Date(str);
					d.setDate(d.getDate() + i);
					var dayobject = {};
					dayobject.day = d;
					this.days.push(dayobject);
				}
				for(var i = 0; i<this.days.length; i++){
					this.days[i].istrue = false;
					if(this.days[i].day.format('yyyy-MM-dd') == new Date().format('yyyy-MM-dd')){
						this.days[i].istrue = true
					}
				}
			},
			pickPre: function(year, month) {

				// setDate(0); 上月最后一天
				// setDate(-1); 上月倒数第二天
				// setDate(dx) 参数dx为 上月最后一天的前后dx天
				var d = new Date(this.formatDate(year, month, 1));
				d.setDate(0);
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
			},
			pickNext: function(year, month) {
				var d = new Date(this.formatDate(year, month, 1));
				d.setDate(35);
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
			},
			pickYear: function(year, month) {
				alert(year + "," + month);
			},

			// 返回 类似 2016-01-02 格式的字符串
			formatDate: function(year, month, day) {
				var y = year;
				var m = month;
				if (m < 10) m = "0" + m;
				var d = day;
				if (d < 10) d = "0" + d;
				return y + "-" + m + "-" + d
			},

			//
			choose: function(e,key) {
				var that = this
				for(var i = 0; i<this.days.length;i++){
					if(i==key){
						this.days[i].istrue = true
					}else{
						this.days[i].istrue = false
					}
				}
				
				that.$forceUpdate();
				this.dateTime = e.day.format('yyyy-MM-dd');
			},
			truebtn(e){
				e = (this.dateTime ? new Date(this.dateTime.replace(/-/g,'/')) : new Date())
				this.dateTime = (this.dateTime ? this.dateTime : new Date().format('yyyy-MM-dd')) 
				var nowData1 = new Date().getTime(); //将时间变成时间戳
				var clickData = e.getTime(); //将时间变成时间戳
				
				// console.log(str)
				var obj = getWeek.getWeek(this.dateTime);
				// this.$parent.chooseDay(str);  接收富组件的方法
				(Number(clickData) >= Number(nowData1) || obj.isToday) && this.$parent.truebtn(this.dateTime);
				
			}
		},
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	ul {
		list-style-type: none;
	}

	body {
		font-family: Verdana, sans-serif;
		background: #E8F0F3;
	}

	.cover {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0;
		left: 0;
	}

	#calendar {
		width: 90%;
		margin: 0 auto;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -45%;
		transform: translateY(-50%);
	}

	.month {
		width: 100%;
		background: #FFFFFF;
	}

	.month ul {
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
	}

	.year-month {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	.year-month:hover {
		background: rgba(150, 2, 12, 0.1);
	}

	.choose-year {
		padding-left: 20px;
		padding-right: 20px;
		font-size: 36px;
		color: #000;
	}

	.choose-month {
		text-align: center;
		font-size: 30px;
	}

	.arrow {
		padding: 30px;
		color: #3BC3C2;
	}

	.arrow:hover {
		background: rgba(100, 2, 12, 0.1);
	}

	.month ul li {
		color: #24AFFF;
		font-size: 30px;
		text-transform: uppercase;
		letter-spacing: 3px;
	}

	.weekdays {
		margin: 0;
		padding: 10px 0;
		background-color: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		color: #04BABE;
		justify-content: space-around;
	}

	.weekdays li {
		display: inline-block;
		width: 13.6%;
		text-align: center;
	}

	.days {
		padding: 0;
		background: #FFFFFF;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-bottom: 30px;
		padding-top: 20px;
	}

	.days li {
		list-style-type: none;
		display: inline-block;
		width: 14.2%;
		text-align: center;
		padding-bottom: 30px;
		padding-top: 30px;
		font-size: 28px;
		color: #000;
		line-height: 1;
	}

	.days li .active {
		padding: 10px;
		border-radius: 50%;
		color: #333333;
		border: 1px solid #3BC3C2;
		box-sizing: border-box;
	}
	.days li .hot_active{
		background: #3BC3C2;
		padding: 10px;
		border-radius: 50%;
	}

	.days li .other-month {
		padding: 5px;
		color: gainsboro;
	}
	.choosebtn{
		width: 100%;
		font-size: 36px;
		color: #FFFFFF;
		padding: 20px 30px;
	}
	.choosebtn p{
		background: #3BC3C2;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30px;
		border-radius: 10px;
	}
</style>
